<template>
  <view>
    <!-- 1. 头部搜索框 -->
    <MySearch />
    <!-- 2. tabs 选项卡 -->
    <u-tabs :list="tabList" lineColor="#EB4450" :scrollable="false"></u-tabs>
    <!-- 3. 商品列表 -->
    <view class="goods-list">
      <!-- 商品列表渲染 -->
      <navigator class="goods-item" :url="`/goodsPackage/goods_detail/index?goods_id=${item.goods_id}`" v-for="item in goodsList" :key="item.goods_id">
        <image :src="item.goods_small_logo" class="goods-image" mode="aspectFit" />
        <!-- 商品信息 -->
        <view class="goods-info">
          <view class="goods-name">{{item.goods_name}}</view>
          <view class="goods-price">{{item.goods_price}}</view>
        </view>
      </navigator>
    </view>
    <!-- 底部提示 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabList: [{ name: "综合" }, { name: "销量" }, { name: "价格" }],
      queryForm: {
        query: '',
        cid: '',
        pagenum: 1,
        pagesize: 10
      },
      goodsList: [],
      total: 0
    };
  },
  // onLoad({id, name}) {
  onLoad(options) {
    // 页面跳转传参不是 vue-router的 this.$route.query
    // 小程序没有vue-router， 他的路由都在 pages.json这个文件里面
    console.log('页面参数传递：',options);
    this.queryForm.query = options.name
    this.queryForm.cid = options.id
    this.getGoodsList()
  },
  // 页面一下拉就触发的事件
  async onPullDownRefresh(){
    console.log('下拉');
    this.queryForm.pagenum = 1
    this.goodsList = []
    this.total = 0
    await this.getGoodsList()
    // 模拟器会自动关闭，但是真实的手机如果不调用关闭下拉框的api，时不会主动关闭
    uni.stopPullDownRefresh()
  },
  // 页面的滚动条一触底就执行的函数
  onReachBottom(){
    console.log('触底啦');
    // 如果总数已经加载完毕了，那么就要停止滑动触底的时候发请求
    // if(this.total < this.queryForm.pagenum * this.queryForm.pagesize)
    if(this.total <= this.goodsList.length){
      uni.showToast({
        title: '数据加载完毕了',
        duration: 2000
      });
      return
    }
    this.queryForm.pagenum++
    this.getGoodsList()
  },
  methods: {
    async getGoodsList() {
      // const {data: { message: {goods, total}}} = xxxx
      const res = await uni.$u.http.get('/goods/search', {params: this.queryForm})
      // 修改下面代码，将新数组和旧数组拼接起来， 涉及到合并数组的方法
      this.goodsList = [...this.goodsList, ...res.data.message.goods]
      this.total = res.data.message.total
    }
  }
};
</script>

<style lang="scss">
.goods-list {
  .goods-item {
    display: flex;
    border-bottom: 1rpx solid #ddd;
    padding: 25rpx;
    .goods-image {
      width: 190rpx;
      height: 190rpx;
    }
    .goods-info {
      flex: 1;
      font-size: 24rpx;
      /* 垂直方向两端对齐 */
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20rpx;
      .goods-name {
        /* 多行超出隐藏 */
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
      .goods-price {
        color: #eb4450;
        /* 前面的价格符号 */
        &::before {
          content: "￥";
          font-size: 80%;
          margin-right: 5rpx;
        }
      }
    }
  }
}
</style>